<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>编辑短信供应商</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <style>
        .mainBox {
            padding: 15px;
        }

        .main-container {
            max-width: 700px;
            margin: 0 auto;
        }

        .layui-form-item {
            margin-bottom: 22px;
        }

        .form-tip {
            display: block;
            margin-top: 8px;
            color: #666;
            font-size: 12px;
            line-height: 1.5;
        }

        .form-tip i {
            color: #1E9FFF;
            margin-right: 4px;
        }

        .bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px;
            background: #fff;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 99;
        }

        .button-container {
            text-align: center;
        }

        .button-container button {
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <form class="layui-form" action="" lay-filter="sms-provider-edit">
        <div class="mainBox">
            <div class="main-container">
                <!-- 1. 供应商名称（必填，唯一，回显后禁用手动修改） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商名称 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="sms_name" id="sms_name" lay-verify="required|verifyName"
                            autocomplete="off" placeholder="供应商名称" class="layui-input">
                        <!-- 编辑时名称只读，避免修改导致关联问题 -->
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            名称为唯一标识，编辑时不可修改（避免影响已关联的短信模板）
                        </span>
                    </div>
                </div>

                <!-- 2. 开发者账号（API Key，必填，可修改） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">API Key <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="sms_key" id="sms_key" lay-verify="required|verifyKeyLength"
                            autocomplete="off" placeholder="请输入供应商平台的API Key" class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            API Key从供应商平台获取（如阿里云AccessKey ID），长度16-64位
                        </span>
                    </div>
                </div>

                <!-- 3. 开发者密码（API Secret） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">API Secret <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="sms_secret" id="sms_secret" lay-verify="required|verifySecretLength"
                            autocomplete="off" placeholder="请输入API Secret" class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-warning" style="color: #ff4d4f;"></i>
                            密钥信息敏感，请注意保密！API Secret长度需在16-128位之间
                        </span>
                    </div>
                </div>

                <!-- 4. 描述说明（非必填：空则不更新） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">描述说明</label>
                    <div class="layui-input-block">
                        <textarea name="sms_description" id="sms_description" autocomplete="off"
                            placeholder="不修改请留空，修改请输入新备注" class="layui-textarea" rows="3"></textarea>
                    </div>
                </div>

                <!-- 5. 供应商状态（单选，必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商状态 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_active" value="1" title="启用" lay-skin="tag">
                        <input type="radio" name="is_active" value="0" title="禁用" lay-skin="tag">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            禁用后，已关联该供应商的短信模板将无法使用
                        </span>
                    </div>
                </div>

                <!-- 6. 排序号（非负整数，非必填：空则不更新） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">排序号</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort_num" id="sort_num" lay-verify="verifySort" autocomplete="off"
                            placeholder="不修改请留空，修改请输入0-9999的整数" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部提交按钮区域 -->
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit
                    lay-filter="sms-provider-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="button" class="pear-btn pear-btn-danger pear-btn-sm" id="close-btn">
                    <i class="layui-icon layui-icon-close"></i>
                    取消
                </button>
            </div>
        </div>
    </form>

    <!-- 引入依赖JS文件 -->
    <script src="../../../component/com/api.js"></script>
    <script src="../../../component/com/auth.js"></script>
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>
    <script>
        layui.use(['form', 'jquery', 'layer'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;

            // 1. 基础配置
            const API_BASE_URL = apiConfig.baseUrl;
            const AUTH_TOKEN = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");
            const urlParams = new URLSearchParams(window.location.search);
            const PROVIDER_ID = urlParams.get('id'); // 编辑的供应商ID
            const SMS_PROVIDER_API = `${API_BASE_URL}/sms/provider/${PROVIDER_ID || ''}/`; // 编辑接口
            let initialData = {}; // 存储初始数据，用于对比变更

            // 2. 页面初始化：加载供应商详情并回显
            if (!PROVIDER_ID) {
                layer.msg('供应商ID不存在，无法编辑', { icon: 2, time: 2000 });
                setTimeout(() => parent.layer.close(parent.layer.getFrameIndex(window.name)), 2000);
                return;
            }
            loadProviderDetail();

            // 加载供应商详情（核心：回显表单数据）
            function loadProviderDetail() {
                const loading = layer.load(2, { shade: 0.3 });
                $.ajax({
                    url: SMS_PROVIDER_API,
                    type: 'GET',
                    headers: { "Authorization": AUTH_TOKEN },
                    dataType: 'json',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success && result.data) {
                            const data = result.data;
                            // 存储初始数据（用于后续对比是否变更）
                            initialData = {
                                sms_name: data.sms_name || '',
                                sms_key: data.sms_key || '',
                                sms_secret: data.sms_secret || '',
                                sms_description: data.sms_description || '',
                                is_active: data.is_active.toString() || '1', // 转字符串，适配单选框value
                                sort_num: data.sort_num.toString() || '0'
                            };

                            // 回显表单（关键：与表单字段名完全匹配）
                            form.val("sms-provider-edit", {
                                sms_name: initialData.sms_name,
                                sms_key: initialData.sms_key,
                                // Secret不回显，避免泄露（编辑时需重新填写才更新）
                                sms_secret: initialData.sms_secret, // 回显完整的 Secret
                                sms_description: initialData.sms_description,
                                is_active: initialData.is_active,
                                sort_num: initialData.sort_num
                            });

                            // 重新渲染表单，解决单选框/下拉框回显不选中问题
                            form.render();
                        } else {
                            layer.msg(result.message || '加载供应商详情失败', { icon: 2, time: 2000 });
                        }
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        const errorMsg = xhr.status === 401 ? '登录已过期，请重新登录' : '网络异常，加载失败';
                        layer.msg(errorMsg, { icon: 2, time: 2000 });
                        if (xhr.status === 401) parent.window.location.href = '../../../login.html';
                    }
                });
            }

            // 3. 表单校验规则（适配编辑场景）
            form.verify({
                // 供应商名称：仅校验非空和长度（编辑时不允许修改，无需唯一性校验）
                verifyName: function (value) {
                    const trimVal = value.trim();
                    if (!trimVal) return "供应商名称不能为空";
                    if (trimVal.length > 50) return "供应商名称长度不能超过50个字符";
                },
                // API Key：校验非空和长度
                verifyKeyLength: function (value) {
                    const trimVal = value.trim();
                    if (trimVal.length < 16 || trimVal.length > 64) {
                        return "API Key长度需在16-64位之间";
                    }
                },
                // API Secret：仅当填写时校验长度（空则不更新，无需校验）
                verifySecretLength: function (value) {
                    const trimVal = value.trim();
                    if (trimVal && (trimVal.length < 16 || trimVal.length > 128)) {
                        return "API Secret长度需在16-128位之间";
                    }
                },
                // 排序号：仅当填写时校验（空则不更新）
                verifySort: function (value) {
                    const trimVal = value.trim();
                    if (trimVal) {
                        const num = parseInt(trimVal);
                        if (isNaN(num) || num < 0 || num > 9999) {
                            return "排序号需为0-9999之间的非负整数";
                        }
                    }
                }
            });

            // 4. 检查数据是否变更（避免无修改提交）
            function isDataChanged(currentData) {
                // 对比必填字段（名称只读，无需对比；Key和状态必选，需对比）
                if (currentData.sms_name.trim() !== initialData.sms_name) return true;
                if (currentData.sms_key.trim() !== initialData.sms_key) return true;
                if (currentData.is_active !== initialData.is_active) return true;

                // 对比可选字段（非空才对比，空则视为不修改）
                const currentSecret = currentData.sms_secret.trim();
                if (currentSecret && currentSecret !== initialData.sms_secret) return true;

                const currentDesc = currentData.sms_description.trim();
                if (currentDesc && currentDesc !== initialData.sms_description) return true;

                const currentSort = currentData.sort_num.trim();
                if (currentSort && currentSort !== initialData.sort_num) return true;

                // 无任何变更
                return false;
            }

            // 5. 表单提交事件（部分更新：PATCH请求）
            form.on('submit(sms-provider-save)', function (data) {
                const currentData = data.field;

                // 第一步：检查是否有实际变更
                if (!isDataChanged(currentData)) {
                    layer.msg("未修改任何数据，无需提交", { icon: 3, time: 1500 });
                    return false;
                }

                // 第二步：处理提交数据（空值过滤，仅传需更新的字段）
                const submitData = {};
                // 必选字段：强制传（Key和状态）
                submitData.sms_name = currentData.sms_name.trim();
                submitData.sms_key = currentData.sms_key.trim();
                submitData.is_active = parseInt(currentData.is_active);
                // 可选字段：非空才传（避免覆盖原有值）
                if (currentData.sms_secret.trim()) submitData.sms_secret = currentData.sms_secret.trim();
                if (currentData.sms_description.trim()) submitData.sms_description = currentData.sms_description.trim();
                if (currentData.sort_num.trim()) submitData.sort_num = parseInt(currentData.sort_num.trim());

                // 第三步：发送更新请求
                const loading = layer.load(2, { shade: 0.3 });
                $.ajax({
                    url: SMS_PROVIDER_API,
                    data: JSON.stringify(submitData),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'PATCH', // 部分更新，仅修改传参字段
                    headers: { "Authorization": AUTH_TOKEN },
                    success: function (result) {
                        layer.close(loading);
                        if (result.success || result.code === 200) {
                            layer.msg(result.message || `供应商「${initialData.sms_name}」更新成功`, {
                                icon: 1,
                                time: 1500
                            }, function () {
                                // 关闭弹窗+刷新父页面表格
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.layui.table.reload("base-table");
                            });
                        } else {
                            // 提取后端错误信息
                            let errorMsg = result.message || "更新失败，请重试";
                            if (result.data && typeof result.data === 'object') {
                                const firstKey = Object.keys(result.data)[0];
                                if (firstKey) errorMsg = result.data[firstKey][0];
                            }
                            layer.msg(errorMsg, { icon: 2, time: 2000 });
                        }
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        const errorMsg = xhr.status === 401 ? '登录已过期，请重新登录' : `网络异常（${xhr.status}），更新失败`;
                        layer.msg(errorMsg, { icon: 2, time: 2000 });
                        if (xhr.status === 401) setTimeout(() => parent.window.location.href = '../../../login.html', 2000);
                    }
                });

                return false; // 阻止表单默认提交
            });

            // 6. 取消按钮：关闭弹窗
            $('#close-btn').on('click', function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });

            // 7. 页面关闭前提示（避免未提交修改丢失）
            window.onbeforeunload = function (e) {
                const currentData = form.val("sms-provider-edit");
                if (isDataChanged(currentData)) {
                    const msg = "有未提交的修改，关闭后将丢失，是否确认？";
                    e.returnValue = msg;
                    return msg;
                }
            };
        });
    </script>
</body>

</html>